<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网球 - 排名</title>
    <!-- 引入通用样式 -->
    <style>
        /* 这里可以添加一些自定义样式 */
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        /* 更多样式... */
    </style>
</head>
<body>
   {% include 'menu.html' %}

    <div class="container">
        <h2>选手排名</h2>

        <!-- 搜索框 -->
        <div class="search-box">
            <input type="text" id="search" placeholder="搜索选手...">
            <button onclick="searchPlayer()">搜索</button>
            
            <form action="/addrink" method="post">
            	<input name="name" />
             	<button type="submit">Submit</button>
            </form>
        </div>

        <!-- 表格排序按钮 -->
        <div class="sort-options">
            <button onclick="sortTable(0)">按排名排序</button>
            <button onclick="sortTable(1)">按姓名排序</button>
            <button onclick="sortTable(2)">按积分排序</button>
        </div><table >
            <tr>
                <th>排名</th>
                <th>选手姓名</th>
                <th>积分</th>
            </tr>
            {% for item in rinks %}
            <tr>
                <td>{{ item.id }}</td>
                <td><a href="player-profile.html">{{ item.name }}</a></td>
                <td>{{ item.score }}</td>
            </tr>
            {% endfor %}
        </table>

        <!-- 分页组件 -->
        <div class="pagination">
            <a href="#">&laquo; 上一页</a>
            <a href="#">1</a>
            <a href="#" class="active">2</a>
            <a href="#">3</a>
            <a href="#">下一页 &raquo;</a>
        </div>
    </div>

    <script>
    /*
        // JavaScript 函数，用于搜索和排序排名
        function searchPlayer() {
            // 实现搜索逻辑
        }
        function sortTable(n) {
            // 实现排序逻辑
            var table, rows, switching, i, x, y, shouldSwitch;
            table = document.getElementById("rankingTable");
            switching = true;
            while (switching) {
                switching = false;
                rows = table.rows;
                for (i = 1; i < (rows.length - 1); i++) {
                    shouldSwitch = false;
                    x = rows[i].getElementsByTagName("TD")[n];
                    y = rows[i + 1].getElementsByTagName("TD")[n];
                    if (n == 0) { // 按排名排序
                        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
                            shouldSwitch = true;
                            break;
                        }
                    } else if (n == 1) { // 按姓名排序
                        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
                            shouldSwitch = true;
                            break;
                        }
                    } else if (n == 2) { // 按积分排序
                        if (parseInt(x.innerHTML) < parseInt(y.innerHTML)) {
                            shouldSwitch = true;
                            break;
                        }
                    }
                }
                if (shouldSwitch) {
                    rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
                    switching = true;
                }
            }
        }
        */
    </script>
</body>
</html>